<template>
    <view>
        <nav-bar title="忘记密码"></nav-bar>
        <view class="top-bg"> </view>
        <view class="changetel-container">
            <view class="changetel-input-wrap">
                <view class="changetel-input">
                    <view class="changetel-input-box">
                        <input
                            type="number"
                            placeholder="请输入手机号吗"
                            placeholder-class="changetel-input-placeholder"
                            v-model="form.tel"
                            maxlength="11"
							class="ip_txt"
                        />
                    </view>
                    <view class="changetel-input-box">
                        <input
                            type="text"
                            placeholder="输入验证码"
                            placeholder-class="changetel-input-placeholder"
                            v-model="form.code"
                            class="changetel-input-box-code ip_txt"
                        />
                        <view
                            class="changetel-input-getcode"
                            @click="getCode"
                            v-if="!isGetCode"
                        >
                            获取验证码
                        </view>
                        <view
                            class="changetel-input-getcode"
                            @click="getCode"
                            v-if="isGetCode"
                        >
                            {{ delay }}s
                        </view>
                    </view>
                    <view class="changetel-input-box">
                        <input
                            type="password"
                            placeholder="请输入新的密码"
                            placeholder-class="changetel-input-placeholder"
                            v-model="form.password"
                        />
                    </view>
                </view>
                <view class="changetel-btn" @click="handleConfirm"> 确定 </view>
                <u-toast ref="uToast" />
            </view>
        </view>
    </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
    components: {
        NavBar,
    },
    data() {
        return {
            form: {
                tel: "",
                code: "",
                password: "",
            },
            delay: 0,
            isGetCode: false,
            getCodeBtnText: "获取验证码",
        };
    },
    methods: {
        getCode() {
            if (this.mobileTest()) {
                if (!this.isGetCode) {
                    this.isGetCode = true;
                    this.delay = 60;
                    var timer = setInterval(() => {
                        this.delay--;
                        if (this.delay <= 0) {
                            this.isGetCode = false;
                            clearInterval(timer);
                        }
                    }, 1000);
                }
                this.getCodeReq();
            }
        },
        // 获取验证码请求
        getCodeReq() {
            let that = this;
            that.$u
                .get("sms_code", {
                    mobile: that.form.tel,
                })
                .then(() => {});
        },
        // 手机号码验证
        mobileTest() {
            let mobielStr =
                /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
            if (!this.form.tel) {
                this.showToast("请输入手机号码");
                return false;
            } else if (!mobielStr.test(this.form.tel)) {
                this.showToast("请输入正确格式手机号码");
                return false;
            }

            return true;
        },
        formCheck() {
            if (!this.form.tel) {
                this.showToast("请输入手机号码");
                return false;
            } else if (!this.form.code) {
                this.showToast("请输入验证码");
                return false;
            } else if (!this.form.password) {
                this.showToast("请输入密码");
                return false;
            }
            return true;
        },
        handleConfirm() {
            if (this.formCheck()) {
                this.$u
                    .post("forget_password", {
                        mobile: this.form.tel,
                        password: this.form.password,
                        code: this.form.code,
                    })
                    .then((res) => {
                        this.$u.toast("修改成功");

                        setTimeout(() => {
                            uni.navigateTo({
                                url: "/pages/login",
                            });
                        }, 500);
                    });
            }
        },
        // toast
        showToast(msg) {
            this.$u.toast(msg);
        },
    },
};
</script>

<style scoped>
	.ip_txt{
		font-size: 14px !important;
	}
page {

    background-color: rgb(253, 253, 240);

}
.top-bg {
    height: 18vh;
    background-color: rgb(51, 204, 0);
}
.changetel-container {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-content: center;
}
.changetel-title {
    display: flex;
    justify-content: center;
    margin-top: 180rpx;
}
.changetel-title-btn {
    margin: 0 60rpx;
    padding: 10rpx 10rpx;
    font-size: 32rpx;
}
.changetel-title-btn-active {
    border-bottom: 8rpx solid #e46c0b;
}

.changetel-input-wrap {
    position: relative;
    background-color: #fff;
    top: -160rpx;
    border-radius: 20px;
}
.changetel-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
}
/* .changetel-input-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 60rpx;
} */
.changetel-input-box input {
    width: 100%;
    background-color: rgb(250, 247, 250);
    /* padding: 40rpx; */
	box-sizing: border-box;
	padding-left: 20px;
	height: 50px;
    border-radius: 80rpx;
}
.changetel-input-placeholder {
    font-size: 32rpx;
}
.changetel-input-forget {
    width: 100%;
    text-align: end;
    margin-top: 20rpx;
    padding-right: 20rpx;
}
.changetel-btn {
    width: 590rpx;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-top: 20rpx;
    /* padding: 40rpx; */
	height: 50px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    font-size: 16px;
	line-height: 50px;
    color: #fff;
    margin-bottom: 40rpx;
}
.changetel-input-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40rpx;
    border-bottom: 2rpx solid #fff;
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
}
.changetel-input-getcode {
    /* padding: 40rpx 10rpx; */
	height: 50px;
    border-radius: 80rpx;
    width: 600rpx;
    font-size: 14px;
	line-height: 50px;
    background-color: rgb(51, 204, 0);
    text-align: center;
    margin-left: 20rpx;
    color: #fff;
}
.changetel-input-box-code {
    width: 100%;
}
</style>